<script setup>
import {reactive} from "vue"
const props = defineProps({
    data:Object
})
const info = reactive({

    })
</script>

<template>
<div class="resume">
    <div class="cell">
        <div class="title">个人信息</div>
        <div>
            <van-row gutter="20">
                <van-col v-if="data.email" span="24" class="td">
                    <div class="key">邮箱</div>
                    <div class="value">{{data.email}}</div>
                </van-col>
                 <van-col v-if="data.phone" span="24" class="td">
                    <div class="key">电话</div>
                    <div class="value">{{data.phone}}</div>
                </van-col>
                <van-col v-if="data.secondary_college" span="24" class="td">
                    <div class="key">学院</div>
                    <div class="value">{{data.secondary_college}}</div>
                </van-col>
                <van-col v-if="data.grade" span="12" class="td">
                    <div class="key">年级</div>
                    <div class="value">{{data.grade}}</div>
                </van-col>
                <van-col  v-if="data.intention" span="12" class="td">
                    <div class="key">意向</div>
                    <div class="value">{{data.intention}}</div>
                </van-col>
                
            </van-row>
            <div class="content">
                {{data.information||"暂未填写"}}
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="title">专业技能</div>
        <div class="content">{{data.skill||"暂未填写~"}}</div>
    </div>
    <div class="cell">
        <div class="title">获得荣誉</div>
        <div class="content">{{data.award||"暂未填写~"}}</div>
    </div>
</div>
</template>

<style scoped>
.resume{
    width: 100%;
}
.title{
    display: inline-block;
    background-image: var(--main-gradient);
    background-size: 100% 30%;
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 2px;
    padding-right: 10px;
    font-weight: bold;
}
.content{
    padding-top: 16px;
    background-color: var(--light-color);
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 10px 0px;
}
.td{
    display: flex;
    align-items: center;
    background-color: var(--second-color);
    color: white;
    padding: 5px;
    border-radius: 50px;
    box-sizing: border-box;
    margin-top: 10px;
}
.key{
    font-weight: bold;
    background-color: var(--main-color);
    padding: 2px 10px;
    border-radius: 50px;
    margin-right: 5px;
}
</style>